<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>009-伪类选择器(结构伪类)</title>
		<style>
			/* 结构1伪类 */
			/* div > p:first-child {
				color: red;
			} */

			/* 结构2伪类（没有样式生效，因为div中第一个子元素不是p） */
			/* div > p:first-child {
				color: red;
			} */

			/* 结构3伪类（没有样式生效，因为div中第一个子元素不是p） */
			/* div p:first-child {
				color: red;
			} */

			/* 结构4伪类（没有样式生效，因为div中第一个子元素不是p） */
			p:first-child {
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 结构1伪类 -->
		<!-- <div>
			<p>张三：第1名</p>
			<p>李四：第2名</p>
			<p>王五：第3名</p>
		</div> -->

		<!-- 结构2伪类 -->
		<!-- <div>
			<span>张三：第1名</span>
			<p>李四：第2名</p>
			<p>王五：第3名</p>
		</div> -->

		<!-- 结构3伪类 -->
		<!-- <div>
			<p>张三：第1名</p>
			<marquee>
				<p>张三：第1名</p>
				<p>Test</p>
			</marquee>
			<p>张三：第1名</p>
			<p>李四：第2名</p>
			<p>王五：第3名</p>
		</div> -->

		<!-- 结构4伪类 -->
		<p>P元素</p>
		<div>
			<p>张三：第1名</p>
			<p>李四：第2名</p>
			<p>王五：第3名</p>
		</div>
	</body>
</html>
